<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>类别管理</el-breadcrumb-item>
      <el-breadcrumb-item>按照类别查询</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="header">
        <h2>按照类别查询账单记录</h2>
        <h3>【查询账单记录时 请填入对应分类的id】</h3>
      </div>

      <div class="search">
        <!-- 搜索框 -->
        <el-input
          placeholder="请输入分类的ID"
          v-model="categoryId"
          clearable
          @clear=""
        >
          <el-button slot="append" icon="el-icon-search" @click="getTransactions(categoryId)"></el-button>
        </el-input>
      </div>


      <!-- 表单区域 -->
      <el-table :data="transactionList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="账目ID" prop="transactionId"></el-table-column>
        <el-table-column label="金额" prop="amount"></el-table-column>
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryId: "",
      transactionList:[],
    };
  },
  methods:{
    async getTransactions(id){
      const { data: res } = await this.$http.get(`transactionsByCategory/`+id);
      if (!res) return this.$message.error("fail");
      this.transactionList=res

    }
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h3 {
  margin-top: 0px;
}
.search{
  display: flex;
  justify-content: center;
  .el-input{
    width: 50%;
  }
}
</style>